import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ButtonBody(),
    );
  }
}

class ButtonBody extends StatefulWidget {
  @override
  _ButtonBodyState createState() => _ButtonBodyState();
}

class _ButtonBodyState extends State<ButtonBody> {
  String _selectedMenu = "Home";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('按钮组件'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 带有水波纹按钮
            RaisedButton(
                // 通过设置padding去除默认内边距
                padding: EdgeInsets.all(0),
                child: Text('RaisedButton'),
                color: Colors.yellow,
                textColor: Colors.black87,
                // 设置阴影
                elevation: 20,
                // 水波纹颜色
                splashColor: Colors.blue,
                onPressed: () {
                  debugPrint('RaisedButton');
                }),
            SizedBox(height: 12),
            RaisedButton.icon(
                onPressed: () {
                  debugPrint("带icon按钮");
                },
                icon: Icon(Icons.settings),
                label: Text('图标按钮')),
            SizedBox(height: 12),
            RaisedButton(
              // RaisedButton 属性，圆角矩形
              onPressed: () {
                debugPrint('RaisedButton');
              },
              child: Text('圆角按钮'),
              highlightColor: Colors.pink, // 点击时颜色
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12.0)),
            ),
            SizedBox(height: 12),
            Column(
              children: [
                // 扁平化按钮
                // FlatButton上下有个安全距离，尽量扩充高度为48像素
                FlatButton(
                  onPressed: () {
                    debugPrint('FlatButton1');
                  },
                  child: Text('FlatButton1'),
                  // 圆形按钮
                  shape: CircleBorder(side: BorderSide(color: Colors.yellow)),
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ),
                FlatButton(
                  onPressed: () {
                    debugPrint('FlatButton2');
                  },
                  child: Text('FlatButton2'),
                  // 圆形按钮
                  shape: CircleBorder(side: BorderSide(color: Colors.yellow)),
                  // 紧缩的，去掉安全距离
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ),
              ],
            ),
            SizedBox(height: 12),
            // 按钮有默认(最小的)width、height,嵌套ButtonTheme改变默认样式，如改变默认大小
            ButtonTheme(
              minWidth: 30,
              height: 30,
              child: FlatButton(
                onPressed: () {},
                child: Text('改变默认大小'),
                color: Colors.red,
                textColor: Colors.blue,
              ),
            ),
            SizedBox(height: 12),
            // 图标按钮
            IconButton(icon: Icon(Icons.add), onPressed: null),
            // 带有边框按钮，点击时边框变亮
            OutlineButton(
              onPressed: () {
                debugPrint('OutlineButton');
              },
              child: Text('OutlineButton'),
            ),
            // 自定义组合按钮
            FlatButton(
                color: Colors.yellowAccent,
                onPressed: () {
                  print('MyFlatButton');
                },
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8)),
                child: Row(
                  // Row占主轴大小，min为包裹
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(
                      Icons.favorite,
                      color: Colors.red,
                    ),
                    Text('喜欢作者')
                  ],
                )),
            // 占满父元素的按钮
            Container(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: OutlinedButton(
                      onPressed: () {},
                      child: Text('取消'),
                    ),
                  ),
                  SizedBox(
                    width: 16.0,
                  ),
                  Expanded(
                    flex: 2,
                    child: OutlinedButton(
                      onPressed: () {},
                      child: Text('提交'),
                    ),
                  ),
                ],
              ),
            ),
            // 并排显示并带有间距的按钮组,包装的Row
            Theme(
              data: Theme.of(context).copyWith(
                buttonTheme: ButtonThemeData(
                    // 扩大按钮组间距
                    padding: EdgeInsets.symmetric(horizontal: 32.0)),
              ),
              child: ButtonBar(
                children: [
                  TextButton(onPressed: () {}, child: Text("在看")),
                  TextButton(onPressed: () {}, child: Text("收藏")),
                  TextButton(onPressed: () {}, child: Text("评论")),
                ],
              ),
            ),
            // 更多弹框
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("$_selectedMenu"),
                PopupMenuButton(
                  onSelected: (value) {
                    setState(() {
                      _selectedMenu = value;
                    });
                  },
                  itemBuilder: (ctx) {
                    return [
                      PopupMenuItem(
                        child: Text('Home'),
                        value: 'Home',
                      ),
                      PopupMenuItem(
                        child: Text('Favor'),
                        value: 'Favor',
                      ),
                      PopupMenuItem(
                        child: Text('ShopCard'),
                        value: 'ShopCard',
                      ),
                    ];
                  },
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
